<template>
  <div class="box_card">
    <el-row style="height: 100%; ">
      <el-col :xs="24" :span="8" style="height: calc(100% - 20px);">

        <hu-card style="height: 100%; ">
          <el-form  :inline="true" label-width="70px">
            <el-form-item label="字典分类" prop="dictName">
              <el-input v-model="queryParams.name" placeholder="请输入字典分类"   style="width: 150px" />
            </el-form-item>
            <el-form-item style="float: right;">
              <el-button type="primary" icon="el-icon-search"  @click="searchList" style="font-size: 14px;">搜索</el-button>
              <el-button type="primary" icon="el-icon-plus"  @click="handleAdd" style="font-size: 14px;margin-left:10px">添加</el-button>
            </el-form-item>
          </el-form>
          <hu-table :tableData="tableData" :loading="MixinLoading" :tableCol="tableCol" highlightCurrentRow @row-click="rowClick">
            <template v-slot:operate="{ row }">
              <el-button type="text" @click="handleUpdate(row)">修改</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </hu-table>
          <pagination style="width: 75%;margin: 10px auto;" layout="prev, pager, next, jumper" v-show="total > 0" :total="total" pagerCount="3" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </hu-card>
      </el-col>
      <el-col :xs="24" :span="16" style="height: calc(100% - 20px); ">
        <hu-card style="margin: 0 15px 0 0; height: 100%;">
          <el-form  :inline="true" label-width="70px">
            <el-form-item label="字典名称" prop="dictName">
              <el-input v-model="queryParams2.name" placeholder="请输入字典名称"   style="width: 220px" />
            </el-form-item>
            <el-form-item style="float: right;">
              <div>
                <el-button type="primary" icon="el-icon-search"  :disabled="!dictId" @click="searchList2" style="font-size: 14px;">搜索</el-button>
                <el-button type="primary" icon="el-icon-plus"  :disabled="!dictId" @click="addList2" style="font-size: 14px;margin-left:10px">添加</el-button>
              </div>
            </el-form-item>
          </el-form>
          <hu-table :tableData="tableData2" :loading="MixinLoading" :tableCol="tableCol2">
            <template v-slot:operate="{ row }">
              <el-button type="text" @click="handleUpdate2(row)">修改</el-button>
              <el-button type="text" @click="handleDelete2(row)">删除</el-button>
            </template>
          </hu-table>
          <pagination v-show="total2 > 0" :total="total2" :page.sync="queryParams2.pageNum" :limit.sync="queryParams2.pageSize" @pagination="getList2" />
        </hu-card>
      </el-col>
    </el-row>
    <hu-modal :title="formChart.id ? '修改-字典分类' : '新增-字典分类'" :show-modal.sync="openDrawer" :loading="MixinLoading" @submit="addFrom">
      <!-- tent sta -->
      <el-form ref="dataForm" :model="formChart" :rules="rulesSon" label-width="110px" style="display: flex;margin-top:10px" class="mt10">
        <el-form-item label="字典分类" prop="name">
          <el-input v-model="formChart.name" placeholder="请输入字典分类名称" style="width:220px" />
        </el-form-item>
        <el-form-item label="字典编号" prop="code">
          <el-input v-model="formChart.code" placeholder="请输入字典分类编号" style="width: 220px;" />
        </el-form-item>
      </el-form>
      <!-- tent end -->
    </hu-modal>
    <hu-modal :title="formChart.id ? '修改-字典类型' : '新增-字典类型'" :show-modal.sync="openDrawer2" :loading="MixinLoading" @submit="addFrom2">
      <!-- tent sta -->
      <el-form ref="dataForm2" :model="formChart" :rules="rulesSon2" label-width="110px" style="display: flex;margin-top:10px">
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="formChart.name" placeholder="请输入字典名称" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input type="number" v-model="formChart.sort" placeholder="请输入字典分类编号" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formChart.remark" style="width: 220px;" type="textarea" :autosize="{ minRows: 5, maxRows: 10}" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <!-- tent end -->
    </hu-modal>
  </div>
</template>

<script>
import * as http from "@/api/system/dict.js";
export default {
  name: "SystemDict",
  data() {
    return {
      valueInput: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
      },
      dictId: undefined,
      total: 0,
      total2: 0,
      tableData: [],
      tableCol: [
        {
          title: "序号",
          type: "index",
          show: true,
          showOverflowTooltip: false,
          width: 50,
        },
        {
          title: "字典分类",
          key: "name",
          show: true,
        },
        {
          title: "字典编码",
          key: "code",
          show: true,
        },
        {
          title: "操作",
          slot: "operate",
          width: 120,
          fixed: "right",
          show: true,
        },
      ],
      tableData2: [],
      tableCol2: [
        {
          title: "序号",
          type: "index",
          show: true,
          showOverflowTooltip: false,
          width: 50,
        },
        {
          title: "名称",
          key: "name",
          show: true,
        },
        {
          title: "排序",
          key: "sort",
          width: 70,
          show: true,
        },
        {
          title: "备注",
          key: "remark",
          show: true,
        },
        {
          title: "创建人",
          key: "createUserName",
          show: true,
        },
        {
          title: "创建时间",
          key: "createTime",
          show: true,
        },
        {
          title: "操作",
          slot: "operate",
          width: 120,
          fixed: "right",
          show: true,
        },
      ],
      openDrawer: false,
      openDrawer2: false,
      formChart: {},
      rulesSon: {
        name: [
          { required: true, message: "字典分类不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "字典编号不能为空", trigger: "blur" },
        ],
      },
      rulesSon2: {
        name: [
          { required: true, message: "字典名称不能为空", trigger: "blur" },
        ],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // get list
    getList() {
      this.MixinLoading = true;
      let params = {
        ...this.queryParams,
      };
      http.getList(params).then(({ result }) => {
        this.tableData = result.records;
        this.total = result.total;
        this.MixinLoading = false;
      });
    },
    // reset 查询
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
    },
    // 表单重置
    reset() {
      this.formChart = {};
      this.resetForm("dataForm");
    },
    reset2() {
      this.formChart = {
        sort: 0,
      };
      this.resetForm("dataForm2");
    },
    handleAdd() {
      this.reset();
      this.openDrawer = true;
    },
    addList2() {
      this.reset2();
      this.openDrawer2 = true;
    },
    handleUpdate(row) {
      this.reset();
      this.formChart = {
        id: row.id,
        code: row.code,
        name: row.name,
      };
      this.openDrawer = true;
    },
    handleUpdate2(row) {
      this.reset2();
      this.formChart = {
        id: row.id,
        name: row.name,
        code: row.code,
        sort: row.sort,
        remark: row.remark,
        isValid: row.isValid,
        resourceId: row.resourceId,
      };
      this.openDrawer2 = true;
    },
    // 提交
    addFrom() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.MixinLoading = true;
          let params = {
            ...this.formChart,
          };
          if (this.formChart.id != undefined) {
            http
              .updateList(params)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.openDrawer = false;
                this.getList();
              })
              .catch((err) => {
                this.MixinLoading = false;
              });
          } else {
            http
              .addList({ ...params, isValid: 0 })
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.openDrawer = false;
                this.searchList();
              })
              .catch((err) => {
                this.MixinLoading = false;
              });
          }
        }
      });
    },
    // 提交
    addFrom2() {
      this.$refs["dataForm2"].validate((valid) => {
        if (valid) {
          this.MixinLoading = true;
          let params = {
            parentId: this.dictId,
            ...this.formChart,
          };
          if (this.formChart.id != undefined) {
            http
              .updateList2(params)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.openDrawer2 = false;
                this.getList2();
              })
              .catch((err) => {
                this.MixinLoading = false;
              });
          } else {
            http
              .addList2(params)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.openDrawer2 = false;
                this.searchList2();
              })
              .catch((err) => {
                this.MixinLoading = false;
              });
          }
        }
      });
    },
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return http.deleteList(row.id);
        })
        .then(() => {
          this.searchList();
          this.$modal.msgSuccess("删除成功");
        });
    },
    handleDelete2(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return http.deleteList2(row.id);
        })
        .then(() => {
          this.searchList2();
          this.$modal.msgSuccess("删除成功");
        });
    },
    rowClick(row) {
      this.dictId = row.id;
      this.searchList2();
    },
    // 查询
    searchList2() {
      this.queryParams2.pageNum = 1;
      this.getList2();
    },
    getList2() {
      this.MixinLoading = true;
      let params = {
        dictId: this.dictId,
        ...this.queryParams2,
      };
      http.getList2(params).then(({ result }) => {
        this.tableData2 = result.records;
        this.total2 = result.total;
        this.MixinLoading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box_card {
  height: calc(100vh - 130px);
  overflow: auto;
}
</style>
